import React, { useState } from "react";

interface AIButtonProps {
    onOpen: () => void;
}

const AIButton: React.FC<AIButtonProps> = ({ onOpen }) => {
    const [isRotating, setIsRotating] = useState(false);

    const handleClick = () => {
        setIsRotating(true);
        onOpen();
        setTimeout(() => setIsRotating(false), 300);
    };

    return (
        <button
            onClick={handleClick}
            style={{
                position: "fixed",
                bottom: "80px",
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "80px",
                borderRadius: "50%",
                background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                border: "none",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 8px 32px rgba(102, 126, 234, 0.4)",
                transition: "all 0.3s ease",
                zIndex: 100,
                animation: isRotating ? "rotate 0.3s ease-in-out" : "none",
            }}
            onMouseEnter={(e) => {
                e.currentTarget.style.transform = "translateX(-50%) scale(1.1)";
                e.currentTarget.style.boxShadow =
                    "0 12px 40px rgba(102, 126, 234, 0.6)";
            }}
            onMouseLeave={(e) => {
                e.currentTarget.style.transform = "translateX(-50%) scale(1)";
                e.currentTarget.style.boxShadow =
                    "0 8px 32px rgba(102, 126, 234, 0.4)";
            }}
        >
            <span
                role="img"
                aria-label="AI助手"
                style={{
                    fontSize: "32px",
                    color: "#fff",
                    filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
                }}
            >
                🤖
            </span>
            <style>{`
                @keyframes rotate {
                    0% { transform: translateX(-50%) rotate(0deg); }
                    100% { transform: translateX(-50%) rotate(180deg); }
                }
            `}</style>
        </button>
    );
};

export default AIButton;
